<template>
  <div class="container">
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="20">
          <el-form-item label="关键字" style="font-weight=700">
            <el-col :span="22">
              <el-input
                v-model="params.keyword"
                style="width: 400px"
                placeholder="根据编号搜素"
              ></el-input
            ></el-col>
            <el-col :span="1">
              <el-button @click="reset">清除</el-button></el-col
            >
            <el-col :span="1">
              <el-button type="primary" @click="search">搜素</el-button>
            </el-col>
          </el-form-item>
        </el-row>
        <el-alert
          :closable="false"
          class="el-icon-info"
          type="info"
          :title="`数据一共${total}条`"
        >
        </el-alert>
      </el-form>
      <el-form class="table">
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="id" label="编号" width="180">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="180">
            <template #default="{ row }">
              {{ questionTypefoamat(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号">
            <template #default="{ row }">
              <div v-for="item in row.questionIDs" :key="item.number">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="preview(item.id)"
                  >{{ item.number }}</el-link
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间"> </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)">
          </el-table-column>
          <el-table-column prop="userName" label="录入人"> </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="delremoveRandoms(row.id)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <!-- 分页组件 -->
      <el-pagination
        :page-size="params.pagesize"
        :current-page="params.page"
        :page-sizes="[5, 20, 30, 50, 100]"
        layout="->, total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 试题预览对话框 -->
    <el-dialog v-if="showdialog" :visible.sync="showdialog" title="题目预览">
      <PreviewQuestions
        :currentId="currentId"
        :isChoice="true"
      ></PreviewQuestions>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms } from "@/api/hmmm/questions.js";
import { questionType } from "@/api/hmmm/constants.js";
console.log("questionType", questionType);
const questionTypeList = {};
questionType.forEach((item) => {
  questionTypeList[item.value] = item.label;
});

export default {
  components: {
    PreviewQuestions: () => {
      return import("@/module-hmmm/components/questions-preview");
    },
  },
  data() {
    return {
      currentId: NaN, // 题库id
      showdialog: false, // 题目预览弹窗
      titlenumber: "", // 题目编号
      list: [], // 存放组题列表
      total: 0, // 总条数
      name: "",
      form: {},
      params: {
        page: 1, // 页码值
        pagesize: 30, // 每页保存的条数
        keyword: "", // 关键字
      },
    };
  },
  created() {
    this.loadrandoms();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      // this.page = 1
      this.params.pagesize = val;
      this.loadrandoms();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.page = val;
      this.loadrandoms();
    },
    // 子组件弹窗
    preview(id) {
      this.showdialog = true;
      this.currentId = id;
      console.log("currentId", this.currentId);
    },
    // 搜索
    search() {
      this.loadrandoms();
    },
    // 清除input
    reset() {
      this.params.keyword = "";
    },
    // 删除组题列表
    async delremoveRandoms(id) {
      const data = {
        id,
      };
      console.log(data);
      const res = await this.$confirm(
        "你确定要删除吗?删除会导致数据丢失",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      ).catch((err) => console.log(err));
      console.log("删除", res);
      if (res) {
        try {
          const res = await removeRandoms(data);
          console.log("removeRandoms", res);
          if (res.status !== 200) return;
          this.$message.success("删除成功");
          this.loadrandoms();
        } catch (err) {
          console.log("removeRandoms", err);
        }
      }
    },
    // 枚举 渲染题干
    questionTypefoamat(val) {
      return questionTypeList[val];
    },
    // 获取组题列表
    async loadrandoms() {
      try {
        const res = await randoms(this.params);
        console.log("randoms组题列表", res);
        // this.page = res.data.page
        // this.size = res.data.pagesize
        this.total = res.data.counts;
        this.list = res.data.items;
        console.log("list", this.list); // 数组包对象
        // console.log('题目编号', res.data.items[0].questionIDs)
      } catch (err) {
        console.log("randoms", err);
      }
    },
  },
};
</script>

<style>
</style>
